<template>
	<view :class="stopSroll? 'stopSroll-show': ''">
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="false" title="商品" z-index="90"></u-navbar>
		<!-- 搜索栏 -->
		<view :class="isSticky == true ? 'sticky': 'search'" :style="{background:search_bg, top: heightGoods + 'px'}">
			<search :search="search" :input_bg="search.input_bg"></search>
		</view>
		<view class="main tc pr" >
			<!-- 轮播图 -->
			<view class="banner">
				<banner-list :banners="banners" background="#FFF" :heightFix="true"></banner-list>
			</view>
			<!-- grid -->
			<view class="menu">
				<gride :menu="goodCategory" :width="120" :height="120" @change="label"></gride>
			</view>
			<!-- tabbar -->
			<view class="select" :class="isSticky ? 'sticky1': 'search1'">
				<dropdown-menu @selectOption="selectOption" :menuList="menuList"></dropdown-menu>
			</view>
			<!-- 商品信息 -->
			<view class="goods">
				<goods-list :goods_data="goods_data" @getId="getId" @clear="clear" ref="goodsList">
				</goods-list>
			</view>
			<view class="getMore" @click="getMore">
				<tap-more :isLoad="isLoad" :isNone="isNone" :isName="isName"></tap-more>
			</view>
		</view>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import search from '../index/components/search.vue'
	import gride from '../index/components/grid.vue'
	export default {
		components: {
			search,
			gride
		},
		data() {
			return {
				show_top: false,                    // 回到顶部按钮显示
				isName: false,                      // 是否加载完成
				isLoad: false,                      // 是否开启load状态
				isNone: false,                      // 是否开启load文字描述
				active: 0,                          // 下拉菜单当前分类
				index: 0,                           // 下拉菜单当前分类的下一级分类
				search: {                           // 搜索框相应信息
					logo: this.imgUrl + 'red-logo.png',
					search: this.imgUrl + 'search.png',
					input_bg: '#EDEDED',
				},
				search_bg: '',                      // 搜索框背景颜色
				isSticky: false,                    // 是否开启固定定位
				searchUrl: '/pages/search/index',   // 搜索路径
				menuList: [{                        // 分类选择菜单
						name: '默认',
						show_option: false,
						active: 0,
						selectList: ['默认', '兑换量', '距离远近']
					},
					{
						name: '兑换量',
						show_option: false,
						active: 0,
						selectList: ['多', '少']
					},
					{
						name: '距离远近',
						show_option: false,
						active: 0,
						selectList: ['近', '远']
					}
				],
				obj: {                              // 请求参数信息
					page: 1,
					pagesize: 10,
					category_id: 0,
					orderby_type: 'number',
					orderby: 'asc',
					lat: '24.881627',
					lng: '118.628881',
					member_id: 1
				},
				goods_data: [],                     // 商品列表信息
				num: '',                            // 菜单下拉下标
				heightGoods: 0,                     // 高度信息
				stopSroll: false,                   // 禁止滚动
			}
		},
		watch: {
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.search_bg = "#FFF"
					this.isSticky = true;
					this.show_top = true;
				} else {
					this.show_top = false;
					this.search_bg = ''
					this.isSticky = false
				}
			},
			// 监听下拉下标
			num(newVal, oldVal) {
				if(newVal != '00') {
					if(newVal != oldVal) {
						this.clear();
						this.getApi();
					}
				}
			},
		},
		computed: {
			...mapState({
				category: state => state.goods.category, // 商品首页分类
				goodCategory: state => state.goods.menu, // 九宫格数据信息
				banners: state => state.init.banners, // 轮播图数据
				hight: state => state.init.scrollTop, // 滚动高度
				systemInfo: state => state.init.systemInfo, // 设备信息
				Location: state => state.user.Location, 				// 经纬度
				menuButtonInfo: state => state.init.menuButtonInfo, // 微信小程序胶囊信息
			})
		},
		mounted() {
			// 获取高度
			uni.getSystemInfo({
			    success: res => {
					this.heightGoods = res.statusBarHeight + this.menuButtonInfo.height + 7;
			        this.$store.dispatch('init/get_systemInfo', res);
			    }
			})
			// 获取经纬度
			this.obj.lat = Number(this.Location.latitude)
			this.obj.lng = Number(this.Location.longitude)
			this.getApi();
		},
		methods: {
			// 获取商品列表
			getApi() {
				this.$api('giftpage', this.obj).then(res => {
					this.goods_data = res.data.data;
				})
			},
			// 清除商品
			clear() {
				this.$refs.goodsList.clear();
			},
			// 排序 - 点击下拉菜单
			selectOption(index, active) {
				let a = index.toString();
				let b = active.toString();
				this.num = a + b
				this.obj.page = 1;
				/**
				 * 记录旧的下标， active 对比新的，如果一致 return; 
				 */
				if (index == 0) {
					if (active == 1) {
						this.obj.orderby_type = 'number';
						this.obj.orderby = 'desc';
						this.obj.pagesize = 16
					}
					if (active == 2) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'asc'
						this.obj.pagesize = 8
					}
				}
				if (index == 1) {
					if (active == 0) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'desc'
						this.obj.pagesize = 8
					}
					if (active == 1) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'asc'
						this.obj.pagesize = 14
					}
				}
				if (index == 2) {
					if (active == 0) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'asc'
						this.obj.pagesize = 12
					}
					if (active == 1) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'desc'
					}
				}
			},
			// 加载更多
			getMore() {
				if (this.isName) return;
				this.isNone = true;
				this.isLoad = true;
				setTimeout(() => {
					this.obj.page++
					this.$api('giftpage', this.obj).then(res => {
						this.goods_data = res.data.data
						if (!res.data.data.length) {
							this.isLoad = false;
							this.isName = true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				}, 1000)
			},
			// 获取商品id
			getId(e) {
				this.$store.dispatch('goods/get_detail', e)
			},
			// grid子组件事件传递
			label(label) {
				this.$store.dispatch('goods/get_goods_title', label);
			},
			// 请求商品
			title(e) {
				this.$store.dispatch('goods/get_title', e);
			}
		},


	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>

<style>
	page {
		background: #F8F8FB;
	}
</style>
